<template>
  <div class="screen">
    <h1>Screen</h1>
    <div class="bottom"></div>
  </div>
</template>

<script setup lang="ts" name="Screen"></script>

<style scoped lang="scss">
  .screen {
    width: 100%;
    height: 100vh;
    background-color: #ccc;
    position: relative;
    .bottom {
      width: 200px;
      height: 100px;
      margin: 0 auto;
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      background: url("../../assets/imgs/bear.png") no-repeat;
      animation: bear 1s steps(8) infinite;
    }
    @keyframes bear {
      100% {
        background-position: -1600px 0;
      }
    }
  }
</style>
